<template>
	<div class="content">
		<div class="tab_box">
			<u-tabs
				@click="clickTab"
				:list="list1" 
				:activeStyle="{
					color: '#23AC39',
					fontSize:'30rpx',
					fontWeight: 500
				}"
				:inactiveStyle="{
					color: '#999999',
					fontSize:'30rpx',
					fontWeight: 500
				}"
				lineColor="#23AC39"
			></u-tabs>
		</div>
		<div class="saixuan_box">
			<div class="search">
				<p class="name">全部</p>
				<p class="sjx"></p>
				<p class="line"></p>
				<img src="/static/search.png" alt="">
				<input type="text" @confirm="confirmInput" v-model="param.name">
			</div>
			<div class="right">
				<div @click="cityShow = true">
					<img src="/static/g_i1.png" alt="">
					<p>地区</p>
				</div>
				<div style="margin-left:22rpx;" @click="sxShow = true">
					<img src="/static/g_i2.png" alt="">
					<p>筛选</p>
				</div>
			</div>
		</div>
		<u-picker 
			keyName="shortname" 
			@cancel=closePop 
			@close="closePop" 
			closeOnClickOverlay 
			title="选择所在地"  
			:show="cityShow" 
			ref="uPicker" 
			:columns="columns" 
			@change="changeHandler"
			@confirm="confirm"
		></u-picker>
		
		<div class="list_box" v-if="list.length">	
			<div class="list" v-for="(item,index) in list" @click="toXq(item.id)">
				<div class="name_box">
					<p class="label" v-if="item.type == 0">卖公司</p>
					<p class="label" v-if="item.type == 1">卖个体户</p>
					<p class="label" v-if="item.type == 2">卖代账户</p>
					<span>{{item.name}}</span>
				</div>
				<!-- 卖公司 -->
				<div class="msg" v-if="item.type == 0">
					<div>
						<p class="title">{{item.area}}</p>
						<p class="text">注册地</p>
					</div>
					<div>
						<p class="title">{{item.setTime}}</p>
						<p class="text">成立时间</p>
					</div>
					<div>
						<p class="title" v-if="item.taxCredit == 0">不确定</p>
						<p class="title" v-if="item.taxCredit == 1">A级</p>
						<p class="title" v-if="item.taxCredit == 2">B级</p>
						<p class="title" v-if="item.taxCredit == 3">M级</p>
						<p class="title" v-if="item.taxCredit == 4">C级</p>
						<p class="title" v-if="item.taxCredit == 5">D级</p>
						<p class="text">纳税等级</p>
					</div>
					<div>
						<p class="title" v-if="item.bankTatement == 0">不确定</p>
						<p class="title" v-if="item.bankTatement == 1">流水很多</p>
						<p class="title" v-if="item.bankTatement == 2">流水偏少</p>
						<p class="title" v-if="item.bankTatement == 3">连续流水</p>
						<p class="title" v-if="item.bankTatement == 4">无流水</p>
						<p class="text">流水情况</p>
					</div>
				</div>
				<!-- 卖个体户 -->
				<div class="msg" v-if="item.type == 1">
					<div>
						<p class="title">{{item.area}}</p>
						<p class="text">注册地</p>
					</div>
					<div>
						<p class="title">{{item.setTime}}</p>
						<p class="text">成立时间</p>
					</div>
					<div>
						<p class="title" v-if="item.taxationState == 0">未开业</p>
						<p class="title" v-if="item.taxationState == 1">小规模</p>
						<p class="title" v-if="item.taxationState == 2">一般纳税人</p>
						<p class="text">税务</p>
					</div>
					<div>
						<p class="title">{{item.bankAccount == 0?'未开户':'已开户'}}</p>
						<p class="text">银行</p>
					</div>
				</div>
				<!-- 卖代账户 -->
				<div class="msg" v-if="item.type == 2">
					<div style="width: 33%;">
						<p class="title">{{item.area}}</p>
						<p class="text">注册地</p>
					</div>
					<div style="width: 33%;">
						<p class="title">{{item.setTime}}</p>
						<p class="text">成立时间</p>
					</div>
					
					<div style="width: 33%;">
						<p class="title">{{item.proxyAccount}}</p>
						<p class="text">代账户数</p>
					</div>
				</div>
				<p class="text1">{{item.remark?item.remark:''}}</p>
				<div class="price_box">
					<p class="price">售价：
						<span v-if="item.price">{{item.price}}元</span>
						<span v-else>面议</span>
					</p>
					<p class="time">{{item.createTime}}</p>
				</div>
			</div>

			<p v-if="isDown" class="no">暂无更多数据～</p>
		</div>
		<div class="no_data" v-else>
			<img src="/static/no-data.png" alt="">
			<p>暂无相关记录哦～</p>
		</div>

		<div class="anniu_box">
			<div class="box" :style="{paddingBottom:isIphoneXnum+'px'}">
				<p @click="modelShow = true">发布入库</p>
				<p @click="toMyFabu">我发布的</p>
			</div>
		</div>

		<!-- 发布入库 -->
		<u-popup @close="closeModel" safeAreaInsetBottom :round="12" :show="modelShow" mode="bottom">
			<form-model @close="closeModel"></form-model>
		</u-popup>

		<!-- 筛选 -->
		<u-popup @close="closeModel" safeAreaInsetBottom :round="12" :show="sxShow" mode="right">
			<form-sx @close="closeModelSx"></form-sx>
		</u-popup>
	</div>
</template>

<script>
	import { mapState } from 'vuex'
	import api from '@/api';
	import { Debounce } from '@/utils/utils.js'
	import Config from '@/config/index.js'
    import FormModel from './components/FormModel.vue'
	import FormSx from './components/FormSx.vue'
	import { formatDateYearMonth } from '@/utils/utils.js'

	export default {
		components: {
			FormModel,
			FormSx
		},
		data() {
			return {
				list1: [{
                    name: '卖公司',
					type:'0'
                }, {
                    name: '卖个体户',
					type:'1'
                }, {
                    name: '卖代账户',
					type:'2'
                }],
				isIphoneXnum:0,
				modelShow:false,
				sxShow:false,
				cityShow:false,
				columns: [],
                columnData: [],
				list:[],
				param:{
					name:'',
					pageNo:1,
					pageSize:10,
					type:'0',
					state:'1'
				},
				isDown:false
			}
		},
		computed: {
			...mapState({
				userId: state => state.user.userId,
				token: state => state.user.token
			})
		},
		methods: {

			// 确认事件
			confirmInput(){
				this.param.pageNo = 1
				this.getList(true)
			},

			closeModelSx(e){
				console.log(e)
				this.sxShow = false
				this.param.pageNo = 1
				this.param = Object.assign(this.param,e)
				console.log(this.param)
				this.getList(true)
			},

			clickTab(item){
				this.param.type = item.type
				this.tabIndex = item.index
				this.param.pageNo = 1
				uni.vibrateShort();
				this.getList(true)
			},

			// 弹窗关闭
			closeModel(){
				this.modelShow = false
				this.sxShow = false
				this.cityShow = false
			},

			// 跳转我的发布
			toMyFabu(){
				uni.navigateTo({
                    url: '/pages/company/myFabu/index'
                });
			},

			// 跳转详情
			toXq(id){
				uni.navigateTo({
                    url: `/pages/company/xq/index?id=${id}`
                });
			},

			// 获取列表
			getList(state){
				this.$showLoading('加载中...')
				api.user.company_page(this.param).then(res=>{
					if(res.code == 200){
						uni.hideLoading();
						if(this.param.pageNo>1 && !res.data.list.length){
							this.isDown = true
							return
						}
						if(state){
							this.list = []
						}
						res.data.list.map(item=>{
							item.createTime = formatDateYearMonth(item.createTime)
						})
						this.list = this.list.concat(res.data.list)
					}
				})
			},

			// 获取地区
			getAreaTree(){
				api.user.getAreaTree().then(res=>{
					this.columns = [res.data.level1]
					this.columnData = res.data.level2
					this.columns.push(res.data.level2[0])
					console.log(this.columns)
				})
			},

			confirm(e){
				console.log(e)
				this.param.domicile = e.value[1].id
				this.closePop()
				this.getList(true)
			},

			changeHandler(e) {
                const {
                    columnIndex,
                    value,
                    values, // values为当前变化列的数组内容
                    index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
                    picker = this.$refs.uPicker
                } = e
                // 当第一列值发生变化时，变化第二列(后一列)对应的选项
                if (columnIndex === 0) {
                    // picker为选择器this实例，变化第二列对应的选项
                    picker.setColumnValues(1, this.columnData[index])
                }
            },
			closePop(){
				this.cityShow = false
			},
			
		},
		onLoad() {
			this.isDown = false
			this.getList()
			this.getAreaTree()
		},
		onShow(){
			uni.getSystemInfo({
				success: (res) => {
					console.log("手机信息res" + res.model);
					let modelmes = res.model;
					if (
						modelmes.search("iPhone 16") != -1 ||
						modelmes.search("iPhone 15") != -1 ||
						modelmes.search("iPhone 14") != -1 ||
						modelmes.search("iPhone 13") != -1 ||
						modelmes.search("iPhone 12") != -1 ||
						modelmes.search("iPhone 11") != -1 ||
						modelmes.search("iPhone X") != -1 ||
						modelmes.search("iPhone XR") != -1 ||
						modelmes.search("iPhone XS") != -1
					) {
						this.isIphoneXnum = 25;
					} else {
						this.isIphoneXnum = 0;
					}
				},
			});
		},
		onReachBottom(){
			this.param.pageNo++
			this.getList()
			console.log('到底了')
		},
	}
</script>

<style lang="scss" scoped>
	.content{
		min-height: 100vh;
		background: #f7f7f7;
		.tab_box{
			background: #fff;
			/deep/ .u-tabs__wrapper__nav__item{
				// justify-content: space-around;
				padding: 0 9.3%;
			}
		}
		.saixuan_box{
			margin:24rpx 30rpx;
			display: flex;
			justify-content: space-between;
			.search{
				height: 72rpx;
				border-radius: 100rpx;
				background: #FFFFFF;
				display: flex;
				align-items: center;
				padding:0 24rpx;
				width: 70%;
				.name{
					color: #333333;
					font-size:28rpx;
				}
				.sjx{
					width: 0;
					height: 0;
					border-left: 10rpx solid transparent;
					border-right: 10rpx solid transparent;
					border-top: 10rpx solid #999999;
					margin:0 22rpx 0 8rpx;
				}
				.line{
					width: 1px;
					height: 32rpx;
					background: #EEEEEE;
				}
				img{
					width: 28rpx;
					height: 28rpx;
					margin-left:18rpx;
				}
				input{
					height: 50rpx;
					margin-left:20rpx;
					font-size:30rpx;
					flex: 1;
				}
			}
			.right{
				display: flex;
				text-align: center;
				div{
					line-height: 36rpx;
				}
				img{
					width: 36rpx;
					height: 36rpx;
				}
				p{
					font-size:26rpx;
					color: #3D3D3D;
				}
			}
		}
		.list_box{
			margin: 0 30rpx;
			.list{
				padding:32rpx 24rpx;
				background: #fff;
				border-radius: 12rpx;
				margin-bottom:20rpx;
				.name_box{
					display: flex;
					align-items: center;
					.label{
						display: inline-block;
						font-size:24rpx;
						color:#fff;
						padding:4rpx 14rpx;
						background: #23AC39;
						border-radius: 16rpx 0 16rpx 0;
						margin-right:10rpx;
					}
					span{
						color: #333333;
						font-size: 30rpx;
						font-weight: 500;
					}
				}
				.msg{
					display: flex;
					justify-content: space-between;
					background: #F6F7F9;
					padding:32rpx 0;
					margin:24rpx 0;
					.title{
						color:#666666;
						font-size:30rpx;
					}
					.text{
						color:#999999;
						font-size:24rpx;
						margin-top:20rpx;
					}
					div{
						width: 25%;
						border-right:1px solid #EEEEEE;
						display: flex;
						flex-direction:column;
						align-items: center;
						&:last-child{
							border-right:none;
						}
					}
				}
				.text1{
					color: #333333;
					font-size: 28rpx;
				}
				.price_box{
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top:48rpx;
					.price{
						font-size: 28rpx;
						color:#FF463F;
						span{
							font-size:34rpx;
						}
					}
					.time{
						color: #999999;
						font-size: 26rpx;
					}
				}
			}
			.no{
				text-align: center;
				color:#999;
				margin:30rpx 0;
				font-size:26rpx;
			}
		}
		.anniu_box{
			width: 100%;
			height: 150rpx;
			.box{
				width: 92%;
				height: 150rpx;
				position: fixed;
				bottom:0;
				left: 0;
				padding:0 30rpx;
				z-index: 100;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background: #FFFFFF;
				box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
				p{
					width: 46%;
					height: 96rpx;
					line-height: 96rpx;
					background: linear-gradient(270deg, #62CE73 0%, #23AC39 100%);
					border-radius: 100rpx;
					text-align: center;
					color: #fff;
					font-size: 32rpx;
					font-weight: 500;
				}
			}
		}
		.no_data{
			text-align: center;
			padding:50rpx 0;
			img{
				width: 320rpx;
				height: 320rpx;
			}
			p{
				font-size: 24rpx;
				color: #999999;
				margin-top:-40rpx;
			}
		}
	}
</style>
